﻿<template>
  <div>

  </div>
</template>

<script>
import { login, menu } from "@/services/account/sso";
import { setAuthorization } from "@/utils/request";
import { mapMutations } from "vuex";
import { loadRoutes } from "@/utils/routerUtil";
import { newGuid } from "@/utils/util";

export default {
  name: "Sso",
  data() {
    return {
      logging: false,
      loginId: newGuid(),
    };
  },

  created() {
    this.initConfig();
  },

  methods: {
    ...mapMutations("account", ["setUser", "setPermissions", "setRoles"]),

    /**
     * 获取系统配置
     */
    initConfig() {
      const route = this.$route;
      document.title = '跳转中...';
      var that = this;
      debugger
      that.$loading.show({ text: '跳转中...' });
      that.logging = true;
      login({
        loginId: that.loginId,
        userId: route.query.userId,
        userAgent: navigator.userAgent,
        browser: that.getBrowser()
      })
        .then(that.afterLogin)
        .catch((error) => {
          that.$message.error("访问异常", 3);
          that.logging = false;
        });
    },

    /**
     * 获取浏览器
     */
    getBrowser() {
      // 获取浏览器 userAgent
      var ua = navigator.userAgent;
      // 是否为 Opera
      var isOpera = ua.indexOf('opr') > -1
      // 返回结果
      if (isOpera) { return 'Opera' }

      // 是否为 IE
      var isIE = (ua.indexOf('compatible') > -1) && (ua.indexOf('MSIE') > -1) && !isOpera
      var isIE11 = (ua.indexOf('Trident') > -1) && (ua.indexOf("rv:11.0") > -1)
      // 返回结果
      if (isIE11) {
        return 'IE11'
      } else if (isIE) {
        // 检测是否匹配
        var re = new RegExp('MSIE (\\d+\\.\\d+);')
        re.test(ua)
        // 获取版本
        var ver = parseFloat(RegExp["$1"])
        // 返回结果
        if (ver == 7) {
          return 'IE7'
        } else if (ver == 8) {
          return 'IE8'
        } else if (ver == 9) {
          return 'IE9'
        } else if (ver == 10) {
          return 'IE10'
        } else { return "IE" }
      }

      //console.log(ua);
      // 是否为 Edge
      var isEdge = ua.indexOf("Edg") > -1
      // 返回结果
      if (isEdge) { return 'Edge' }

      // 是否为 Firefox
      var isFirefox = ua.indexOf("Firefox") > -1
      // 返回结果
      if (isFirefox) { return 'Firefox' }

      // 是否为 Safari
      var isSafari = (ua.indexOf("Safari") > -1) && (ua.indexOf("Chrome") == -1)
      // 返回结果
      if (isSafari) { return "Safari" }

      // 是否为 Chrome
      var isChrome = (ua.indexOf("Chrome") > -1) && (ua.indexOf("Safari") > -1) && (ua.indexOf("Edge") == -1) && (ua.indexOf("QQBrowser") == -1) && (ua.indexOf("2345Explorer") == -1) && (this.check360() == false)
      // 返回结果
      if (isChrome) { return 'Chrome' }

      // 是否为 QQ
      var isQQ = ua.indexOf("QQBrowser") > -1
      // 返回结果
      if (isQQ) { return 'QQ浏览器' }

      // 是否为搜狗浏览器
      var isMaxthon = ua.indexOf("se 2.x") > -1
      // 返回结果
      if (isMaxthon) { return '搜狗浏览器' }

      debugger
      // 是否为2345浏览器
      var is2345Explorer = ua.indexOf("2345Explorer") > -1;
      // 返回结果
      if (is2345Explorer) {
        return '2345浏览器';
      }

      var is360 = this.check360() && (ua.indexOf("Safari") > -1)
      if (is360) { return '360浏览器' }

      // 都不是
      return ''
    },

    /**
     * 360浏览器（极速内核）
     */
    check360() {
      var result = false;
      for (var key in navigator.plugins) {
        // np-mswmp.dll只在360浏览器下存在
        if (navigator.plugins[key].filename == 'internal-nacl-plugin') {
          return !result;
        }
      }
      return result;
    },

    /**
     * 登录成功
     * @param {} result
     */
    afterLogin(result) {
      const loginRes = result;
      let that = this;
      if (loginRes.code === this.eipResultCode.success) {
        //获取菜单
        var routesConfig = [
          {
            router: "root",
            children: [],
          },
        ];
        this.setUser(loginRes.data);
        setAuthorization({
          token: loginRes.data.token,
          expireAt: new Date(loginRes.data.expireAt),
        });

        //注册路由
        menu().then((result) => {
          result.forEach((element) => {
            routesConfig[0].children.push(element);
          });
          loadRoutes(routesConfig);
          that.routerGo(routesConfig);
          that.$message.success(loginRes.msg, 3);
          that.$loading.hide();
        });
      } else {
        this.error = loginRes.msg;
        this.captchaInterval();
      }
      this.logging = false;
    },

    /**
     *
     *
     */
    routerGo(routesConfig) {
      var routes = [];
      // 递归遍历控件树
      const traverse = (array) => {
        array.forEach((element) => {
          if (element.path) {
            routes.push(element);
          } else {
            // 栅格布局 and 标签页
            element.children.forEach((item) => {
              if (item.path) {
                routes.push(item);
              } else {
                traverse(item.children);
              }
            });
          }
        });
      };
      traverse(routesConfig);
      this.$router.push(routes[0].path);
    },
  }
};
</script>

<style lang="less" scoped>
.lizi {
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  position: absolute;
}

.login-wrapper .anticon {
  cursor: pointer;
}

.login-wrapper .anticon:hover {
  color: @primary-color;
}

.login-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.login-wrapper {
  padding: 48px 16px 0 16px;
  position: relative;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.login-form {
  width: 360px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 28px;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
  border-radius: 2px;
  position: relative;
  z-index: 2;
}

@media screen and (min-height: 640px) {
  .login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -230px;
  }
}

.eip-bg-white {
  background-color: #fff !important;
}

.login-form h4 {
  padding: 22px 0;
  text-align: center;
}

.login-copyright {
  color: #eee;
  text-align: center;
  padding: 48px 0 22px 0;
  position: relative;
  z-index: 1;
}

@media screen and (min-height: 640px) {
  .login-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

h4 {
  font-size: 20px;
}

.eip-pull-right {
  float: right;
}

.eip-text-center {
  text-align: center;
}

/deep/ .ant-input-group-addon {
  padding: 0 !important;
}

.login-tip {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 999
}
</style>
